import { View, Image } from '@ray-js/ray';
import React from 'react';
import ColorPic from '@/components/ColorPic';
import clsx from 'clsx';
import styles from './index.module.less';
import noiceRes from '../../../public/noiceImage';
import { useProps } from '@ray-js/panel-sdk';

export const LogoComponent = ({
  color,
  scale,
  className,
}: {
  color: string;
  scale: number;
  className?: string;
}) => {
  const { time_mode: timeMode, local_time: localTime } = useProps(props => props);

  return (
    <View
      className={clsx(styles.bigLog, className)}
      style={{
        transform: `scale(${scale})`,
      }}
    >
      <Image src={noiceRes.logoContainer} className={styles.imgContainer} />
      <ColorPic color={color} className={styles.canvas} />
    </View>
  );
};
